<div nz-row nzJustify='center' style="animation: bgcChange 4s infinite alternate;height: 50px;">
    <div class="tabList" (click)='setActive($event);setPage("life");setClassTag("life")' nz-col nzSpan ='5' style="text-align: center;font-size: 20px;">生活</div>
    <div class="tabList" (click)='setActive($event);setPage("mark");setClassTag("mark")' nz-col nzSpan ='5' style="text-align: center;font-size: 20px;">笔记</div>
    <div class="tabList" (click)='setActive($event);setPage("front");setClassTag("front")' nz-col nzSpan ='5' style="text-align: center;font-size: 20px;">前端</div>
    <div class="tabList" (click)='setActive($event);setPage("back");setClassTag("back")' nz-col nzSpan ='5' style="text-align: center;font-size: 20px;">后端</div>
</div>

<div class="articleTag" *ngFor="let item of articleList">
    <div class="left">
        <h2 class="acticleTitle">{{item.title}}</h2>
        <h3 class="articleArtist">{{item.artist}}</h3>
        <i nz-icon nzType="heart" nzTheme="outline"></i>{{item.liked}}
        <i nz-icon nzType="eye" nzTheme="outline"></i>{{item.viewed}}
    </div>
    <div class="right">
        <img [src]="imgSrc">
    </div>

</div>

<nz-pagination class="pagination" [(nzPageIndex)]="pageIndex" [nzPageSize]='4' [nzTotal]="page" (click)="showPg()"></nz-pagination>